
<!-- **************头部页面开始****** -->
<template>
<!-- **************头部页面开始******深圳苓贯科技有限公司 -->
<div>
<div class="col-md-12">
	<br>
<!-- <div class="dropdown" style="right:40px;top:44%; position:absolute;font-size:16px;">
  <a data-toggle="dropdown" href="#">语言切换</a>
  <ul class="dropdown-menu" role="menu" style="min-width: 100px;text-align: center;"  aria-labelledby="dLabel">
    <li><a href="#">中文</a></li>
	 <li><a href="#">英文</a></li>
  </ul>
</div> -->
<div class='btn-group' style="right:40px;top:44%; position:absolute;">
<a class='btn'  data-toggle='dropdown' style="font-size:15px;">{{$t("page.lang_language")}}</a>
<a class='btn dropdown-toggle' data-toggle='dropdown' href='javascript:;'><span class='caret'></span></a>
<ul class='dropdown-menu' style="min-width:210px;text-align: center;font-size:15px;">
<li  @click='changeLanguage("zh")'><a  href='javascript:;'>中文-chinese</a></li>
<li  @click='changeLanguage("en")'><a  href='javascript:;'>English</a></li>
</ul>
</div>
	<div class="h4" style="color: red; margin: 30px 300px 0px 400px; position: absolute;">
            {{$t('page.lang_h4')}}
  </div>
   <p style="left:5px;"> <img  style="display:none" src="static/img/login/log.jpg" alt="">
   <br>
   </p>
</div>
<!-- ************头部页面结束********** -->
<div id="contenttop" class="content">
   <!-- login-wrapk开始 -->
  <div class="login-wrap" >
    <!-- w开始 -->
  	<div class="col-md-12">
           <!-- *****************登录页面开始************ -->
  		<div class="login-form">
  			<div class="login-tab login-tab-l">
  				<a href="javascript:;"> {{$t('page.lang_taba')}}</a>
  			</div>
  			<div class="login-tab login-tab-r">
  				<a href="javascript:;"> {{$t('page.lang_tabb')}}</a>
  			</div>
  			<!-- login-box开始（账户登录） -->
  			<div class="login-box" style="visibility: visible; display:block">
  			  <div class="mt tab-h"></div>
  			  <!-- 登录提示信息开始 -->
  			  <div class="msg-wrap">
  			  	  <div class="msg-warn" style="overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;">
  					  <b></b>
  				{{$t('page.lang_msgwarn')}}
  				  </div>
  				  <div class="msg-error hide">
  					  <b></b>
  				  </div>
  			  </div>
  			  <!-- 登录提示信息结束 -->
  			  <div class="mc">
  			  	<div class="form">
  			  		<form action="#" id="formlogin" method="post" onSubmit="return false;">
  			  			<input type="hidden" name="" class="hide" id="" value="">
  			  			<input type="hidden" name="" class="hide" id="" value="">
  			  			<input type="hidden" name="" class="hide" id="" value="">
  			  			<input type="hidden" name="" class="hide" id="" value="">
  			  			<input type="hidden" name="" class="hide" id="" value="">
  			  			<input type="hidden" name="" class="hide" id="" value="">
  			  			<input type="hidden" name="" class="hide" id="" value="">
  			  			<!-- 用户名输入框fore1 -->
  			  			<div class="item item-fore1 item-error">
  			  				<label for="loginname" class="login-label name-label"></label>
  			  				<input type="text" name="loginname" id="loginname" class="itxt" 
								tabindex="1" autocomplete="off" :placeholder="$t('page.lang_placeholdera')">
  			  				<span class="clear-btn" style="display:inline;"></span>
  			  			</div>
  			  			<!-- 密码输入框fore2 -->
  			  			<div id="entry" class="item item-fore2" style="visibility: visible">
  			  				<label class="login-label pwd-label" for="nloginpwd"></label>
  			  				<input type="password" name="" id="nloginpwd"  class="itxt itxt-error" tabindex="2" autocomplete="off" :placeholder="$t('page.lang_placeholderb')">
  			  				<span class="clear-btn" style="display: inline;"></span>
  			  				<span class="capslock" style="display: none;">
  			  					<b></b>
  			  					大小写锁定已打开
  			  				</span>
  			  			</div>
  			  			<!-- 图片验证码开始 fore3-->
                        <div id="o-authcode" class="item item-vcode item-fore3" style="width:330px">
                        	<input type="text" name="" id="authcode" class="itxt itxt02"  tabindex="3" style="width:120px">
							<!-- 验证码图片 -->
							<img src="" id="yzm">
                        	<a href="javascript:;" style="line-height: 2.5"  id="yzmh">&nbsp;&nbsp;{{$t('page.lang_yzmh')}}</a>
                        </div>
                        <!-- 自动登录开始fore4 -->
                        <div class="item item-fore4">
                        	<div class="safe">
                        		<span style="vertical-align:middle;">
                        			<input type="checkbox" name="chkRememberMe" id="autologin" tabindex="3">
                        			<label for>{{$t('page.lang_autologin')}}</label>
                        		</span>
                        		<!-- <span class="forget-pw-safe">
                        			<a href="">{{$t('page.lang_forget')}}</a>
                        		</span> -->
                        	</div>
                        </div>
                        <!-- 登录按钮开始 -->
                        <div class="item item-fore5">
                        	<div class="login-btn">
                        		<a href="javascript:;" class="btn-img btn-entry" id="loginsubmit" tabindex="6" onClick="validate()">{{$t('page.lang_loginsubmit')}}</a>
                        	</div>
                        </div>
  			  		</form>
  			  	</div>
  			  </div>
  			  <!-- mc结束 2input+自动登录+登录按钮-->
  			</div>
  			<!-- login-box结束（账户登录） -->
  			<!-- 二维码登陆开始 （扫码登录）-->
  			<div class="qrcode-login">
  				<div class="mc">
  					<div class="qrcode-error-2016">
  						<div class="qrcode-error-mask"></div>
  						<p class="err-cont">服务器出错</p>
  						<a href="javascript:void(0)" class="refresh-btn">刷新</a>
  					</div>
  					<div class="qrcode-main">
  						<div class="qrcode-img" style="">
  							<img src="picture/nav/code.png" alt="">
  							<div class="qrcode-error-02 hide" id="J-qrcodeerror" style="display: none;">
  								<a href="#none">
  									<span class="error-icon"></span>
  									<div class="txt">
  									   网络开小差咯
  									   <span class="ml10">刷新二维码</span>
  									 </div>
  								</a>
  							</div>
  						</div>
  						<div class="qrcode-help" style="display: none;"></div>
  					</div>
  					<!-- 二维码结束 -->
  					<div class="qrcode-panel">
  						<ul>
  							<li class="fore1">
  								<span>打开</span>
  								<a href="">
                                      <span class="red">手机APP</span>
                                      扫一扫
  								</a>
  							</li>
  					
  						</ul>
  					</div>
  					<!-- panel结束 -->
  					<div class="coagent qr-coagent" id="qrCoagent" style="display: block; visibility: visible;display: none;">
  						<ul>
  							<li><b></b><em>免输入</em></li>
  							<li><b class="faster"></b><em>更快&nbsp;</em></li>
  							<li><b class="more-safe"></b><em>更安全</em></li>
  						</ul>
  					</div>
  				</div>
  				<!-- mc结束 -->
  			</div>
  			<!-- 二维码登录结束 （扫码登录）-->
  			<!-- 登录框底部登录方式 开始qq,微信-->
  			<div class="coagent" id="kbCoagent">
  				<ul>
  					<li style="display:none;">
  						<a href="javascript:void(0)" onClick="return false;" class="pdl">
  							<b class="QQ-icon"></b>
  							<span>QQ</span>
  						</a>
  						<span class="line">|</span>
  					</li>
  					<li>
  						<a href="javascript:void(0)" onClick="return false;" class="pdl">
  							<b class="weixin-icon"></b>
  							<span>{{$t('page.lang_weixin')}}</span>
  						</a>
  						<span class="line">|</span>
  					</li>
  					
  					<li class="extra-r" style="display:none">
  					   <div class="regist-link">
  						<a href="#/register" target=“_blank” onClick="return true;" class="">
  							<b></b>立即注册
  						</a>
  					   </div>
  					</li>
  				</ul>
  			</div>
  			<!-- 登录框底部登录方式 结束qq,微信-->
  		</div>
  		  <!-- ************ 登录页面login-form结束************  -->
  	</div>
  	<!-- w结束 -->
  	<!-- 中间广告部分开始 -->
  	<div class="login-banner" style="background-color: #fc3343">
  	    <div class="">
			  <!-- 背景图 -->
  			<div id="banner-bg" class="i-inner" :style="bg" ref="loginBg"></div>
  		</div>
  	</div>
  	<!-- 中间背景广告结束 -->
  </div>
	<!-- login-wrap结束 -->
</div>
<!-- 内容部分结束 -->
<!-- 底部页面开始  深圳苓贯科技 版权所有-->
<div class="col-md-12" >
	<div id="footer-2013" style="text-align: center">
		<div class="links">
			<a href="" ><b>Copyright © 2010-2018 </b></a>
		</div>
	</div>
</div>
</div>
<!-- 底部页面结束 -->

</template>
<!-- 底部页面结束 -->

<style>
@media screen and (min-width: 320px) and (max-width: 480px){
    p{
    line-height:85px;vertical-align: middle;color:#563d7c;font-size:6vw;font-weight:bold;font-family:microsoft yahei
    }
};
@media screen and (min-width: 620px){
    p{
    line-height:85px;vertical-align: middle;color:#563d7c;font-size:6vw;font-weight:bold;font-family:microsoft yahei
    }
};
/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 
      p{
    line-height:85px;vertical-align: middle;color:#563d7c;font-size:26px;font-weight:bold;font-family:microsoft yahei
    }
    .login-wrap .login-form{
    right:90px;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px){
    p{
    line-height:85px;vertical-align: middle;color:#563d7c;font-size:26px;font-weight:bold;font-family:microsoft yahei
    }
    .login-wrap .login-form{
right:60px;
}
};
/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 
 p{
    line-height:85px;vertical-align: middle;color:#563d7c;font-size:26px;;font-weight:bold;font-family:microsoft yahei
    }
    .login-wrap .login-form{
right:90px;
}
}
/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) {
     p{
    line-height:85px;vertical-align: middle;color:#563d7c;font-size:26px;font-weight:bold;font-family:microsoft yahei
    }
    .login-wrap .login-form{
    right:90px;
}
 }
@media only screen and (min-width : 1200px) {
p{
line-height:85px;vertical-align: middle;color:#563d7c;font-size:26px;font-weight:bold;font-family:microsoft yahei
}
.login-wrap .login-form{
right:90px;
}
}
@media screen and (min-width: 393px) and (max-width: 818px){
    p{
    line-height:85px;vertical-align: middle;color:#563d7c;font-size:6vw;font-weight:bold;font-family:microsoft yahei
    }
    .login-wrap .login-form{
right:8px;
}
};
</style>
<style>
 @import './css/base.css'; 
@import './css/login.css'; 
 @import './css/sweetalert/sweetalert.css';  
</style>
<style lang="less" scoped>
</style>
<script>
import "@/utils/jquery/jquery-ui-jqLoding.js"
import "@/utils/jquery/jquery.cookie.min.js"
import  "@/utils/sweetalert/sweetalert.min.js";
import "./js/Login.js"
export default {
	 name: "Login",
    data(){
        return{
			bg:random(1,5)
        }
    },
     mounted(){
//alert(languageval);
		domain.languageval=this;
            /**
             * iframe-宽高自适应显示   
             */
    },
    methods:{
		// 语言切换
     changeLanguage (type) {
      this.$i18n.locale = type;
	  window.localStorage.setItem("languageval", type);
	  $(".msg-error").hide();
	//  domain.languageval=this;
    }
    } 
}
</script>
